<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>比屋教育-https://bwonline.ke.qq.com</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        button {
            border: none;
        }

        a {
            text-decoration: none;
        }

        /* 内容居中 */
        .w {
            width: 1200px;
            margin: auto;
        }

        /* header模块 */
        .header {
            height: 42px;
            margin: 30px auto;
        }

        .logo {
            float: left;
            margin-right: 60px;
        }

        .nav {
            float: left;
        }
        
        .nav ul li {
            float: left;
        }

        .nav ul li a {
            display: block;
            height: 40px;
            padding: 0 10px;
            margin-right: 20px;
            line-height: 40px;
            font-size: 18px;
            color: #050505;
        }

        .nav ul li a:hover {
            border-bottom: 2px solid #00a4ff;
        }

        .search {
            float: left;
            margin-right: 70px;

        }

        .search input {
            float: left;
            width: 340px;
            height: 40px;
            border: 1px solid #00a4ff;
            border-right: 0;
            padding-left: 20px;
            color: #ccc;
        }

        .search button {
            float: left;
            width: 50px;
            height: 42px;
            background-image: url(btn.png);
        }

        .user {
            float: left;
            height: 42px;
            line-height: 42px;
            margin-left: 30px;
            font-size: 16px;
            color: #666;
        }

        /* 轮播页面 */
        .banner {
            height: 420px;
            background: #1c036c url(b2.jpg) no-repeat top center ;
        }
        .subnav {
            float: left;
            width: 150px;
            height: 420px;
            padding: 0 20px;
            background:rgba(0, 0, 0,.3)
        }

        .subnav li {
            height: 45px;
            line-height: 45px;
        }

        .subnav a {
            color: #fff;
            font-size: 14px;
        }

        .subnav li a:hover {
            color: #0be6e6;
        }

        .subnav span {
            float:right;
        }

        .course {
            float: right;
            width: 228px;
            height: 300px;
            background-color: #fff;
            margin-top: 50px;
        }

        .course-hd {
            height: 48px;
            background-color: #1dbeb1;
            font-size: 18px;
            text-align: center;
            line-height: 48px;
            color: #fff;
            font-weight: 700;
        }

        .course-bd {
            padding: 0 15px;
        }

        .course-bd ul {
            padding-top: 10px;
            /* margin-top: 10px; */
        }
        .course-bd li {
            height: 50px;
            border-bottom: 1px solid #ccc;
        }

        .course-bd h4 {
            font-size: 14px;
            color: #4e4e4e;
        }

        .course-bd p {
            font-size: 12px;
            color: #a5a5a5;
        }
        .all {
            display: block;
            height: 38px;
            border: 1px solid #00a4ff;
            margin-top: 10px;
            font-size: 16px;
            color: #00a4ff;
            text-align: center;
            line-height: 38px;
        }

        .all:hover {
            background-color: #00a4ff;
            color: #fff;
        }

        /* 精品推荐 */
        .goods {
            height: 60px;
            background-color: #fff;
            margin-top: 10px;
            line-height: 60px;
            box-shadow: 2px 2px 2px rgba(0,0,0,.2);
        }
        .goods h3 {
            float: left;
            margin: 0 30px;
            font-size: 16px;
            color: #00a4ff;
        }

        .goods-item {
            float: left;
            color: #bfbfbf;
        }
        .goods-item a {
            font-size: 16px;
            color: #050505;
            margin: 0 30px;
        }

        .mod {
            float:right;
            margin-right: 30px;
            font-size: 14px;
            color: #00a4ff;
        }

        /* 精品推荐 -> 小图 */
        .box {
            margin-top: 15px;
        }

        .box-hd {
            height: 60px;
            line-height: 60px;
        }

        .box-hd h3 {
            float: left;
            font-size: 20px;
            color: #494949;
            font-weight: 700;
        }

        .box-hd a {
            float: right;
            margin-right: 30px;
            color: #a5a5a5;
            font-size: 12px;
        }

        .box-bd {
            width: 1255px;
        }

        .box-bd li {
            float: left;
            width: 228px;
            height: 270px;
            margin-right: 15px;
            margin-bottom: 15px;
            background-color: #fff;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
        }

        .box-bd li img {
            width: 100%;
        }

        .box-bd h4 {
            margin: 20px;
            font-size: 14px;
            color: #050505;
            font-weight: 400;
        }

        .box-bd p {
            margin: 0 20px;
            font-size: 12px;
            color: #999;
        }
        .box-bd p span {
            color: orange;
        }

        /* 尾部 */
        .footer {
            height: 385px;
            padding-top: 30px;
            background-color: #fff;
        }
        .copyright {
            float: left;
        }

        .copyright p {
            font-size: 12px;
            color: #666;
            margin: 20px 0 15px 0;
        }

        .app {
            display: block;
            width: 118px;
            height: 34px;
            border: 1px solid #00a4ff;
            text-align: center;
            line-height: 34px;
            font-size: 16px;
            color: #00a4ff;
        }

        .links {
            float: right;
        }
        .links dl {
            float: left;
            margin-left: 100px;
        }
        .links dt {
            height: 35px;
            font-size: 16px;
            color: #333;
        }
        
        .links dd a {
            font-size: 12px;
            color: #333;
        }

        .links dd a:hover {
            color: #004aff;
        }
        
    </style>
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="logo.png" alt="">
		</div>
		<!-- nav -->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">就业相关</a></li>
			</ul>
		</div>
		<!-- search -->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="user.jpg" alt="">
			比屋学员-韩梅梅
		</div>
    </div>
    
    <!-- 轮播页 -->
	<div class="banner">
        <div class="w">
            <!-- 左侧 subnav  -->
            <div class="subnav">
                <ul>
                    <li><a href="#">web前端开发 <span>></span></a></li>
                    <li><a href="#">java后端开发 <span>></span></a></li>
                    <li><a href="#">移动端开发 <span>></span></a></li>
                    <li><a href="#">大数据开发 <span>></span></a></li>
                    <li><a href="#">人工智能<span>></span></a></li>
                    <li><a href="#">云计算 <span>></span></a></li>
                    <li><a href="#">运维&从测试 <span>></span></a></li>
                    <li><a href="#">UI设计 <span>></span></a></li>
                    <li><a href="#">产品 <span>></span></a></li>
                </ul>
            </div>
            <!-- 右侧 course -->
            <div class="course">
                <div class="course-hd">我的课程表</div>
                <div class="course-bd">
                    <ul>
                        <li>
                            <h4>比屋教育web前端课程</h4>
                            <p>正在学习-项目开发</p>
                        </li>
                        <li>
                            <h4>比屋教育Java课程</h4>
                            <p>正在学习-微信支付开发</p>
                        </li>
                        <li>
                            <h4>比屋教育大数据课程</h4>
                            <p>正在学习-Spark数据ETL</p>
                        </li>
                        
                    </ul>
                    <a href="#" class="all">全部课程</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 精品推荐-> 修改兴趣 -->
    <div class="goods w">
        <h3> 精品推荐 </h3>
        <div class="goods-item">
            |  <a href="#">jQuery</a>
            |  <a href="#">Spark</a>
            |  <a href="#">MySQL</a>
            |  <a href="#">JavaWeb</a>
            |  <a href="#">MySQL</a>
            |  <a href="#">比屋教育</a>
        </div>
        <div class="mod"> 修改兴趣 </div>                                                                
    </div>

    <!-- 精品推荐 -> 小图 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
                <li>
                    <img src="pic3.jpg" alt="">
                    <h4>web前端项目实战开发</h4>
                    <p><span>初级</span>  •  2650人正在学习</p>
                </li>
            </ul>
        </div>
    </div>

    <!-- 尾部 footer -->
    <div class="footer">
        <div class="w">
            <!-- 左侧 -->
            <div class="copyright">
                <img src="logo.png" alt="">
                <p>比屋教育，秉承“活学活用”的教育理念，集合资深专家讲师团队，依托完善的线上教学管控平台，<br>
                    专注于大数据、云计算、互联网架构师等领域的职业技能培训，着力培养满足互联网企业实际需<br>求的高端人才</p>



                <a href="#" class="app"> 下载 app</a>
            </div>
            <!-- 右侧 -->
            <div class="links">
                <dl>
                    <dt>关于比屋教育</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>新手指南</dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何选课</a></dd>
                    <dd><a href="#">如何部署项目</a></dd>
                    <dd><a href="#">如何面试</a></dd>
                    <dd><a href="#">如何加新</a></dd>
                </dl>
    
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">比屋教育</a></dd>
                    <dd><a href="#">比屋教育</a></dd>
                </dl>
    
    
            </div>
        </div>
    </div>
</body>
</html>